/**
 * Created by gengrong on 16/5/6.
 */
import { LayerLink } from 'comps/common';
import MachineLog from '../../../machine-manage/containers/machine-log';
import { Icon, Tooltip, Row, Col, Button } from 'antd';

const UnitDeployLogList = ({ deployLogs = [], onRefreshDeployLog }) => {
  const loadLog = (log) => {
    const status = JSON.parse(log.result);
    const logs = [];
    for (let k in status) {
      let deployStatus;
      switch (status[k].status) {
        case 'OK':
          deployStatus = <span className='color-success'>部署成功</span>;
          break;
        case 'FAILED':
          deployStatus = (<span className='color-danger'>部署失败[
            {status.type === 'START' ? '' :
              <LayerLink title={`部署日志 (${status[k].ip})`} component={ MachineLog }
                data={{ id: k, namespace: 'applications', uuid: log.id }}
              >查看日志</LayerLink>
            }]</span>);
          break;
        case 'DEPLOYING':
          deployStatus = (<span className='color-info'>部署中[
            {status.type === 'START' ? '' :
              <LayerLink title={`部署日志 (${status[k].ip})`} component={ MachineLog }
                data={{ id: k, namespace: 'applications', uuid: log.id }}
              >查看日志</LayerLink>
            }]</span>);
          break;
        default:
      }
      logs.push(
        <div key={k}>
          <span>{status[k].ip}&nbsp;|&nbsp;</span>
          {deployStatus}
        </div>
      );
    }
    return logs;
  };

  const getImageName = json => {
    const properties = JSON.parse(json);
    return properties.image;
  };

  return (
    <div className='unit-deploy-log'>
      {
        deployLogs.map(log => {
          const { type, id, properties } = log;
          let deployType;
          switch (type) {
            case 'START':
              deployType = <span><Icon type='caret-right'/> 发布 | </span>;
              break;
            case 'RESTART':
              deployType = <span><Icon type='reload'/> 重启 | </span>;
              break;
            case 'STOP':
              deployType = <span><Icon type='pause'/> 停止 | </span>;
              break;
            default:
              break;
          }
          return (
            <div className='log-item' key={id}>
              <div>
                {deployType}
                <Tooltip title={getImageName(properties)}>
                  <span>Image</span>
                </Tooltip>
              </div>
              { loadLog(log) }
            </div>
          );
        })
      }
      <Row type='flex' justify='center'><Col><Button onClick={onRefreshDeployLog}><Icon type='reload'/>刷新</Button></Col></Row>
    </div>
  );
};

export default UnitDeployLogList;
